<template>
	<view class="detail">
		<view class="detail-title" v-if="detailInfo.articleTitle">
			{{detailInfo.articleTitle}}
		</view>
		<view class="detail-header">
			<view class="detail-header__logo">
				<image :src="url+detailInfo.materialUrl" mode="aspectFill"></image>
			</view>

			<view class="detail-header__content">
				<view class="detail-header__content-title" v-if="detailInfo.articleAuthor">
					{{detailInfo.articleAuthor}}
				</view>
				<view class="detail-header__content-info">
					<text class="" v-if="detailInfo.createTime">{{ detailInfo.createTime }}</text>
					<!-- <text class="" v-if="detailInfo.likes">点赞数{{detailInfo.likes}}</text> -->
					<text class="" v-if="detailInfo.view">浏览数{{detailInfo.view}}</text>
				</view>
			</view>
			<u-button type="primary" size="mini" shape="circle" @click="clickFollowCancel"
				v-if="articleStatus.follow == 1">
				取消关注</u-button>
			<u-button type="primary" size="mini" shape="circle" @click="clickFollow"
				v-else-if="articleStatus.follow == 0">关注
			</u-button>
		</view>
		<view class="detail-content">
			<view class="detail-html">
				<u-parse :html="detailInfo.content" :domain="domain"></u-parse>
			</view>
			<view class="detail-comment" v-if="detailInfo.commentFlag == 1">
				<view class="comment-title">
					评论区
				</view>
				<view class="comment-content">
					<view class="vfor" v-for="(item,index) in commentList" :key="index">
						<view class="item_wrap">
							<view class="ileft">
								<view class="avatar">
									<u-image width="70rpx" height="70rpx" shape="circle" :src="item.avatar"></u-image>
								</view>
								<view class="nick">
									<text>{{item.nickname}}</text>
								</view>
							</view>
							<view class="iright">
								<view class="likes">
									<!-- <u-icon name="thumb-up" color="grey" size="40"></u-icon> -->
									<!-- <text>{{item.likes}}</text> -->
								</view>
							</view>
						</view>
						<view class="ccontent">
							{{item.content}}
						</view>
						<view class="" v-if="item.imgs != null && item.imgs != ''"  style="display: flex; flex-wrap: wrap; margin-left: 85rpx;">
							
							<view class="" style="margin: 10rpx;" @click="previewImg(item.imgs,indexs)"   v-for="(items,indexs) in item.imgs" :key="index"  >
								<u-image  width="150rpx" height="150rpx" :src="items"></u-image>
							</view>
						</view>
						<view class="reply" @click="openReply(item)">
							<text>{{item.replies}}回复</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="writeComments" v-if="detailInfo.commentFlag == 1">
			<view style="width: 50vw; height: 10vw; padding: 2vw;; border: 1px solid #CCCCCC; border-radius: 50vh;" @click="openWriteDialog">写评论...</view>
			
			<!-- <u-input v-model="writeContent" type="text" placeholder="写评论..." confirm-type="写评论" @confirm="writeComment"
				class="writeContent"></u-input> -->
			<view class="shoucang">
				<u-icon name="thumb-up-fill" @click="clickCancelLikes" color="#3BA2FF" size="50"
					v-if="articleStatus.likes == 1"></u-icon>
				<u-icon name="thumb-up" @click="clickLikes" size="50" color="#3BA2FF"
					v-else-if="articleStatus.likes == 0">
				</u-icon>
			</view>
			<view class="zan">
				<u-icon name="star-fill" @click="clickCancelCollection" color="#3BA2FF"
					v-if="articleStatus.collections == 1" size="50"></u-icon>
				<u-icon name="star" @click="clickCollection" color="#3BA2FF" v-else-if="articleStatus.collections == 0"
					size="50"></u-icon>
			</view>
			<view class="share">
				<button open-type="share">
					<u-icon name="share" color="#3BA2FF" size="50"></u-icon>
				</button>
			</view>
		</view>
		
		<view :class="['dialogWrite',showDialog == true?'showDialogWrite':(howDialog == false?'hideDialogWrite':'')]" >
			<view @click="closeWrite" class="cloneDialogWrite">
				<view class="">
					评论框
				</view>
				<image class="img" src="../../static/images/close.png" mode=""></image>
			</view>
			<view class="" style="padding: 0 30rpx 30rpx 30rpx;">
				<textarea class="textarea" v-model="writeContent" placeholder="请输入内容" />
			</view>
			<view class="imageMain">
				<view v-for="(item,index) in imageList" class="image">
					<image class="photo" :src="item" mode="aspectFill"></image>
					<image class="clone" src="../../static/images/close.png" @click="delImage(index)" mode=""></image>
					<!-- <view class="clone" @click="delImage(index)"></view> -->
				</view>
				<view @click="selectImage" class="imageAdd">
					<u-icon name="plus" color="#fff" size="50"></u-icon>
				</view>
			</view>
			<view class="but"  @click="writeComment()" v-if="writeContent.length || imageList.length">发送</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.baseUrl,
				domain: this.domain,
				articleId: '',
				// 文章信息
				detailInfo: {},
				commentList: [], // 评论列表
				articleStatus: {}, //文章状态信息
				
				showDialog:null,
				writeContent: '', // 评论内容
				imageList: [], //图片列表
				// 点赞信息
				articleStatus: {},
				commentList: [], // 评论列表
				imgList:[],

			}
		},
		onLoad(event) {
			this.articleId = event.articleId
			this.getArticleInfo(event.articleId);
			this.getCommentList()
		},
		onReady() {

		},
		methods: {
			// 点击预览图片
			 previewImg(logourl,index) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = logourl[index]
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			// 关闭评论框
			closeWrite(){
				this.showDialog=false;
				this.writeContent= "";
				this.imageList= [];
				this.imgList= [];
			},
			// 弹出 评论框
			openWriteDialog(){
				this.showDialog=true;
				this.writeContent= "";
				this.imageList= [];
				this.imgList= [];
			},
			openModel() {
				this.show = true;
			},
			
			// 跳入子评论页面
			openReply(item) {
				uni.navigateTo({
					url: `/subpackage/industry_dynamic_detail/commentReply?cId=${item.commentId}&commentType=1`
				})
			},
			// 获取用户文章 所有点赞信息
			articleUserStatus() {
				this.$u.api.articleUserStatus({
						articleId: this.articleId,
						userId: this.detailInfo.userId
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.articleStatus = res.data
					});
			},
			// 点击 收藏按钮
			clickCollection() {
				// if (!this.$store.state.isLogin) return this.$u.toast("请登录");
				var login = this.checkLogin();
				if (!login) {
					return false;
				}
				this.$u.api.saveCollection({
						articleId: this.articleId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("收藏成功");
						this.articleStatus.collections = 1
					});
			},
			// 取消收藏
			clickCancelCollection() {
				this.$u.api.saveCollectionCancel({
						articleId: this.articleId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("取消收藏");
						this.articleStatus.collections = 0
					});
			},
			// 点赞
			clickLikes() {
				//if (!this.$store.state.isLogin) return this.$u.toast("请登录");
				var login = this.checkLogin();
				if (!login) {
					return false;
				}
				this.$u.api.saveLikes({
						articleId: this.articleId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("点赞成功");
						this.articleStatus.likes = 1
					});
			},
			// 取消点赞
			clickCancelLikes() {
				this.$u.api.saveLikesCancel({
						articleId: this.articleId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("取消点赞");
						this.articleStatus.likes = 0
					});
			},

			// 关注
			clickFollow() {

				//  if (!this.$store.state.isLogin) return this.$u.toast("请登录");
				var login = this.checkLogin();
				if (!login) {
					return false;
				}

				this.$u.api.saveFollow({
						articleId: this.articleId,
						followId: this.detailInfo.userId
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("关注成功");
						this.articleStatus.follow = 1
					});
			},
			// 取消点赞
			clickFollowCancel() {
				this.$u.api.saveFollowCancel({
						articleId: this.articleId,
						followId: this.detailInfo.userId
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.$u.toast("取消关注");
						this.articleStatus.follow = 0
					});
			},
			// 获取 评论 list
			getCommentList() {
				this.$u.api.articleComments.getPCommentsByArticleId({
						articleId: this.articleId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						
						for(let i=0;i<res.rows.length;i++){
							if(res.rows[i].imgs != null){
								let array = res.rows[i].imgs.split(',')
								res.rows[i].imgs = array
							}
						}
						this.commentList = res.rows
						
					});
			},
			// 写评论
			writeComment() {
				// if (!this.$store.state.isLogin) return this.$u.toast("请登录");
				var login = this.checkLogin();
				if (!login) {
					return false;
				}
				if(this.writeContent == ""){
					this.$u.toast("请填写评论！");
					return;
				}
				
				
				let param = {
					articleId: this.articleId,
					content: this.writeContent,
					commentParentid: '0',
					commentType: 1,
					imgs:this.imgList.join(',')
				}
				this.$u.api.articleComments.saveWindComment(param)
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.writeContent = '';
						this.showDialog = false;
						this.imageList= [];
						this.imgList= [];
						this.getCommentList();
						this.$refs.uToast.show({
							type: 'success',
							title: '评论成功'
						})
					});
			},

			gotoMyUser() {

			},
			onShareAppMessage(res) {
				return {
					title: this.detailInfo.articleTitle,
					path: '/subpackage/industry_dynamic_detail/industry_dynamic_detail?articleId=' + this.articleId
				}
			},

			// 根据id 内容 列表
			getArticleInfo(articleId) {
				this.$u.api.article.articleInfo({
						articleId: articleId,
					})
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						console.log(res, 's')
						this.detailInfo = res.data
						this.articleUserStatus();
					});
			},
			selectImage() {
				let _this = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						_this.imageList = _this.imageList.concat(res.tempFilePaths);
						
						uni.uploadFile({
							url: _this.baseUrl + "/common/upload",
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (fileRes) => {
								let data = JSON.parse(fileRes.data);
								var url = data.url;
								_this.imgList.push(url);
							},
							fail: (res) => {
								console.log(res);
							}
						});
					
					}
				});
			},
			delImage(index){
				this.imageList.splice(index,1)
				delete this.imgList[index];
			}
		}
	}
</script>

<style lang="scss">
	.detail {
		padding: 10px 0px;
		padding-bottom: 54px;

		.detail-title {
			padding: 0px 15px;
			font-weight: bold;
			font-size: 18px;
			color: #333;
		}

		.detail-header {
			display: flex;
			align-items: center;
			padding: 0px 15px;
			margin-top: 10px;
			margin-bottom: 10px;
			border-bottom: 1px solid #1A1A1A;
			box-shadow: #1A1A1A;

			// 头像
			.detail-header__logo {
				width: 40px;
				height: 30px;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.detail-header__content {
				display: flex;
				justify-content: space-between;
				width: 100%;
				flex-direction: column;
				font-size: 12px;
				padding-left: 10px;

				.detail-header__content-title {
					color: #333;
					font-size: 14px;
				}

				.detail-header__content-info {
					color: #6b6b6b;

					text {
						font-size: 12px;
						margin-right: 10px;
					}
				}
			}
		}

		// 内容
		.detail-content {

			// height: 1000px;
			.detail-html {
				margin-bottom: 20px;
				padding: 0px 10px;
			}

			.detail-comment {
				margin: 20rpx;

				// 评论区头
				.comment-title {
					font-size: 15px;
					padding: 10px 10px;
					border-bottom: 2px solid #000000;
				}

				// 评论区内容
				.comment-content {
					display: flex;
					flex-direction: column;
					margin-top: 20rpx;
					margin-bottom: 100rpx;

					.vfor {
						.item_wrap {
							margin-top: 30rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.ileft {
								display: flex;
								align-items: center;

								.avatar {
									margin-right: 15rpx;
								}

								.nick {
									text {
										font-weight: bold;
									}
								}
							}

							.iright {
								display: flex;

								.likes {
									margin-right: 10rpx;

									text {
										margin-left: 5rpx;
									}
								}

								.unlikes {
									text {
										margin-left: 5rpx;

									}
								}
							}
						}

						.ccontent {
							margin-left: 85rpx;
							font-size: 27rpx;
						}

						.reply {
							margin-left: 85rpx;
							margin-top: 20rpx;

							text {
								background-color: #F4F4F4;
								padding: 5rpx 50rpx 8rpx 20rpx;
								margin-right: -30rpx;
								border-radius: 20rpx;
								font-size: 27rpx;
							}
						}
					}
				}
			}
		}

		.writeComments {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			width: 750rpx;
			height: 100rpx;
			align-items: center;
			background-color: #fff;
			border-top: 1rpx solid #eee;

			.writeContent {
				background-color: #f4f4f4;
				height: 60rpx;
				align-items: center;
				border-radius: 30rpx;
				padding-left: 50rpx !important;
				// width: 400rpx;
			}

			.write_warp {}

			.zan {
				width: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.shoucang {
				width: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.share {
				button {
					background-color: rgba($color: #000000, $alpha: 0);
				}

				button:after {
					border: none;
				}
			}
		}
	}
	
	.dialogWrite{
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 0;
		left: 0;
		z-index: 999;
		background: white;
		box-sizing: border-box;
		box-shadow: 0px -4px 4px 0px #a7a7a7;
	
		
	}
	.cloneDialogWrite{
		
			display: flex;
			justify-content: space-between;
			border-top: 3px solid #CCCCCC;
		// position: absolute;
		// top: 1vw;
		// right: 1vw;
		padding: 4vw;
		font-size: 5vw;
		.img{
			width: 5vw;
			height: 5vw;
		}
	}
	.showDialogWrite{
		animation: mymove 2s forwards;
	}
	.hideDialogWrite{
		
		animation: mymove 2s forwards alternate;
	}
	
	@keyframes mymove
	{
		from {height:0;}
		to {height:70vh;}
	}
	
	.textarea {
			width: 100%;
			height: 30vw;
			border: 1px solid #adadad;
			box-sizing: border-box;
			border-radius: 2vw;
			padding: 1vw;
			// margin: 15vw 0 0 0;
		}
	
		.imageMain {
			display: flex;
			flex-wrap: wrap;
			// margin: 2vw 0;
			padding: 30rpx;
		}
	
		.image {
			width: 22vw;
			height: 22vw;
			position: relative;
			margin: 2vw 2vw 0 0;
			border-radius: 2vw;
		}
	
		.photo {
			width: 100%;
			height: 100%;
		}
	
		.clone {
			position: absolute;
			top: 1vw;
			right: 1vw;
			width: 5vw;
			height: 5vw;
		}
	
		.imageAdd {
			width: 22vw;
			height: 22vw;
			background: #cccccc;
			margin: 2vw 0 0 0;
			text-align: center;
			line-height: 21vw;
	
		}
	
		.but {
			color: white;
			background: #0089ff;
			border-radius: 50vw;
			height: 60rpx;
			width: 120rpx;
			line-height: 60rpx;
			text-align: center;
			position: absolute;
			right: 5vw;
			bottom: 5vw;
		}
		
		.slot-content{
			padding: 0 38rpx 0 38rpx
		}
</style>
